<template>
  <div class="data-container">
    <el-row gutter="20" class="data-content">
      <el-col :span="7" class="elcol">
        <el-row class="elrow narrow">
          <el-col class="title">企业监管</el-col>
          <el-col class="componyCount">
            <compony-count></compony-count>
          </el-col>
          <el-col class="companyChart">
            <div class="linebg"></div>
            <pay-count></pay-count>
          </el-col>
          <el-col class="companyChart">
            <div class="linebg"></div>
            <credit-level></credit-level>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="10" class="elcol">
        <el-row class="elrow widerow">
          <el-col class="animatebox">
            <animateBg></animateBg>
          </el-col>
          <el-col class="widechart">
            <el-col class="title">监管成果</el-col>
            <el-col class="watchInfo">
              <watch-result></watch-result>
            </el-col>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="7" class="elcol">
        <el-row class="elrow narrow">
          <el-col class="title">项目监管</el-col>
          <el-col class="circlechart">
            <el-row class="averagerow">
              <el-col :span="12" class="chartcol">
                <project-total
                  id="projectTotal"
                  color="#00F6FF"
                  title="项目总数"
                  desc="开工项目数"
                  centerDesc="总数"
                  :chartData="projectData"
                ></project-total>
              </el-col>
              <el-col :span="12" class="chartcol">
                <realname-total
                  id="realnameTotal"
                  title="实名制总人数"
                  centerDesc="总数"
                  :chartData="realnameData"
                ></realname-total>
              </el-col>
            </el-row>
            <el-row class="averagerow">
              <el-col :span="12" class="chartcol">
                <project-total
                  id="checkWork"
                  color="#0066FF"
                  title="实名制考勤比例"
                  desc="考勤总人次"
                  centerDesc="考勤率"
                  :chartData="attendanceData"
                ></project-total>
              </el-col>
              <el-col :span="12" class="chartcol">
                <project-total
                  id="contract"
                  color="#5366E0"
                  title="实名制合同比例"
                  desc="合同签订总人次"
                  centerDesc="合同率"
                  :chartData="contractData"
                ></project-total>
              </el-col>
            </el-row>
            <el-row class="averagerow">
              <el-col :span="12" class="chartcol">
                <project-total
                  id="account"
                  color="#0066FF"
                  title="专户开设项目比例"
                  desc="专户开设项目数"
                  centerDesc="开设比例"
                  :chartData="accountData"
                ></project-total>
              </el-col>
              <el-col :span="12" class="chartcol">
                <project-total
                  id="salary"
                  color="#FCB437"
                  title="工资代发项目比例"
                  desc="工资代发项目数"
                  centerDesc="代发比例"
                  :chartData="salaryData"
                ></project-total>
              </el-col>
            </el-row>
            <el-row class="averagerow">
              <el-col :span="12" class="chartcol">
                <project-total
                  id="deposit"
                  color="#FFCB87"
                  title="保证金缴存项目比例"
                  desc="保证金缴存项目数"
                  centerDesc="缴存比例"
                  :chartData="depositData"
                ></project-total>
              </el-col>
              <el-col :span="12" class="chartcol">
                <project-total
                  id="billboard"
                  color="#4BB8FB"
                  title="维权信息告示牌比例"
                  desc="告示牌上传项目数"
                  centerDesc="上传比例"
                  :chartData="billboardData"
                ></project-total>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import animateBg from './animateBg.vue'
import projectTotal from './projectTotal.vue'
import realnameTotal from './realnameTotal.vue'
import watchResult from './watchResult.vue'
import componyCount from './componyCount.vue'
import payCount from './payCount.vue'
import creditLevel from './creditLevel.vue'

export default {
  name: 'dataProfiling',
  props: {
    isFullScreen: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    animateBg,
    projectTotal,
    realnameTotal,
    watchResult,
    componyCount,
    payCount,
    creditLevel,
  },
  data() {
    return {
      projectData: [
        //项目总数
        {
          name: '开工项目数',
          value: '',
        },
        {
          name: '不显示',
          value: '',
        },
        {
          centerData: '',
        },
      ],
      realnameData: [
        {
          name: '在场',
          value: '',
        },
        {
          name: '退场',
          value: '',
        },
        {
          centerData: '',
        },
      ],
      attendanceData: [
        //考勤
        {
          name: '考勤总人次',
          value: '',
        },
        {
          name: '不显示',
          value: '',
        },
        {
          centerData: '',
        },
      ],
      contractData: [
        //合同
        {
          name: '合同签订总人次',
          value: '',
        },
        {
          name: '不显示',
          value: '',
        },
        {
          centerData: '',
        },
      ],
      accountData: [
        //专户开设
        {
          name: '专户开设项目数',
          value: '',
        },
        {
          name: '不显示',
          value: '',
        },
        {
          centerData: '',
        },
      ],
      salaryData: [
        //工资代发
        {
          name: '工资代发项目数',
          value: '',
        },
        {
          name: '不显示',
          value: '',
        },
        {
          centerData: '',
        },
      ],
      depositData: [
        //保证金缴存
        {
          name: '保证金缴存项目数',
          value: '',
        },
        {
          name: '不显示',
          value: '',
        },
        {
          centerData: '',
        },
      ],
      billboardData: [
        //告示牌上传
        {
          name: '告示牌上传项目数',
          value: '',
        },
        {
          name: '不显示',
          value: '',
        },
        {
          centerData: '',
        },
      ],
      areaId: this.$store.state.areaInfoArr.areaId,
    }
  },
  mounted() {
    this.getProjectData()
    this.getRealnameData()
    this.getAttendanceData()
    this.getAccountData()
    this.getSalaryData()
    this.getDepositData()
    this.getBillboardData()
  },
  methods: {
    // 项目总数
    getProjectData() {
      return this.axios({
        method: 'post',
        url: 'api-p/projectstats/expand/dataprostats',
        data: {
          // areaId: this.areaId
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            const { result } = response.data
            this.projectData[0].value = result.startCount
            this.projectData[1].value = result.allCount - result.startCount
            this.projectData[2].centerData = result.allCount
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 实名制总数
    getRealnameData() {
      return this.axios({
        method: 'post',
        url: 'api-c/company/risk/stats/base/contract/data',
      })
        .then((response) => {
          if (!response.data.hasError) {
            const { result } = response.data
            this.realnameData[0].value = result.attPresentSum
            this.realnameData[1].value =
              result.realNameSum - result.attPresentSum
            this.realnameData[2].centerData = result.realNameSum
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 实名制考勤/合同
    getAttendanceData() {
      return this.axios({
        method: 'post',
        url: 'api-s/cs/employeestats/base/empstats',
        data: {
          // areaId: this.areaId
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            const { result } = response.data
            // 实名制考勤
            this.attendanceData[0].value = result.attTotal
            this.attendanceData[1].value =
              result.attTotal / (result.attScale / 100) - result.attTotal
            this.attendanceData[2].centerData = result.attScale + '%'
            // 实名制合同
            const contractTotal = result.contractTotal
              ? result.contractTotal.replace(/,/g, '')
              : 0
            this.contractData[0].value = contractTotal
            this.contractData[1].value =
              contractTotal / (result.contractScale / 100) - contractTotal
            this.contractData[2].centerData = result.contractScale + '%'
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 专户开设
    getAccountData() {
      return this.axios({
        method: 'post',
        url: 'api-p/projectstats/expand/projectaccountcount',
        data: {
          // areaId: this.areaId
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            const { result } = response.data
            this.accountData[0].value = result.accountCount
            this.accountData[1].value =
              result.accountCount / (result.accountOpenedPercent / 100) -
              result.accountCount
            this.accountData[2].centerData = result.accountOpenedPercent + '%'
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 工资代发
    getSalaryData() {
      return this.axios({
        method: 'post',
        url: 'api-p/projectstats/expand/projectSalaryCount',
        data: {
          // areaId: this.areaId
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            const { result } = response.data
            this.salaryData[0].value = result.replaceCount
            this.salaryData[1].value =
              result.replaceCount /
                (result.replacePer &&
                  result.replacePer.replace('%', '') / 100) -
              result.replaceCount
            this.salaryData[2].centerData = result.replacePer
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 保证金缴存
    getDepositData() {
      return this.axios({
        method: 'post',
        url: 'api-p/projectstats/expand/projectDepositCount',
        data: {
          // areaId: this.areaId
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            const { result } = response.data
            this.depositData[0].value = result.isDepositTotal
            this.depositData[1].value =
              result.isDepositTotal /
                (result.depositPercent &&
                  result.depositPercent.replace('%', '') / 100) -
              result.isDepositTotal
            this.depositData[2].centerData = result.depositPercent
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 告示牌上传
    getBillboardData() {
      return this.axios({
        method: 'post',
        url: 'api-p/projectstats/expand/rightsnoticestats',
        data: {
          // areaId: this.areaId
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            const { result } = response.data
            this.billboardData[0].value = result.rightsCount
            this.billboardData[1].value =
              result.rightsCount / (result.rightsScale / 100) -
              result.rightsCount
            this.billboardData[2].centerData = result.rightsScale + '%'
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
  },
}
</script>

<style lang="less" scoped>
.data-container {
  height: 100%;
  padding: 0 20px 20px;
  // background-color: rgb(6, 37, 70);
  .data-content {
    height: 100%;
    // background-color: rgb(6, 37, 70);
    .elcol {
      height: 100%;
      .elrow {
        height: 100%;
        padding-top: 40px;
        .animatebox {
          height: 65%;
        }
        .widechart {
          height: 35%;
          padding: 30px 0 0;
          background-image: url('../../assets/img/wide.png');
          background-size: 100% 100%;
          position: relative;
          .title {
            position: absolute;
            top: 5px;
          }
          .watchInfo {
            height: 100%;
          }
        }
        .circlechart {
          height: 100%;
          padding: 10px 20px;
          .averagerow {
            height: 25%;
            .chartcol {
              height: 100%;
            }
          }
        }
        .componyCount {
          height: 34%;
          padding: 0 20px;
        }
        .companyChart {
          height: 33%;
          padding: 0 20px;
          .linebg {
            width: 100%;
            height: 52px;
            background-image: url('../../assets/img/line.png');
            background-size: 100% 100%;
          }
        }
      }
      .widerow {
        padding-top: 0;
      }
      .narrow {
        background-image: url('../../assets/img/narrow.png');
        background-size: 100% 100%;
        position: relative;
      }
      .title {
        position: absolute;
        top: 8px;
        text-align: center;
        background-image: -webkit-linear-gradient(bottom, #13fff1, #e5efff);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
</style>
